<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03-iScroll高级使用</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        touch-action: none;
      }
      div {
        width: 50%;
        height: 300px;
        border: 1px solid #000;
        box-sizing: border-box;
        overflow: hidden;
        position: relative;
      }
      dl > dt {
        line-height: 30px;
        text-align: center;
        border-bottom: 1px solid #000;
      }
      .iScrollVerticalScrollbar {
        width: 30px;
        height: 100%;
        background: deepskyblue;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 999;
      }
      .iScrollIndicator {
        width: 100%;
        background: pink;
      }
    </style>
    <script src="js/iscroll.js"></script>
  </head>
  <body>
    <div class="box">
      <dl>
        <dt>我是标题1</dt>
        <dt>我是标题2</dt>
        <dt>我是标题3</dt>
        <dt>我是标题4</dt>
        <dt>我是标题5</dt>
        <dt>我是标题6</dt>
        <dt>我是标题7</dt>
        <dt>我是标题8</dt>
        <dt>我是标题9</dt>
        <dt>我是标题10</dt>
        <dt>我是标题11</dt>
        <dt>我是标题12</dt>
        <dt>我是标题13</dt>
        <dt>我是标题14</dt>
        <dt>我是标题15</dt>
        <dt>我是标题16</dt>
        <dt>我是标题17</dt>
        <dt>我是标题18</dt>
        <dt>我是标题19</dt>
        <dt>我是标题20</dt>
        <dt>我是标题21</dt>
        <dt>我是标题22</dt>
        <dt>我是标题23</dt>
        <dt>我是标题24</dt>
        <dt>我是标题25</dt>
        <dt>我是标题26</dt>
        <dt>我是标题27</dt>
        <dt>我是标题28</dt>
        <dt>我是标题29</dt>
        <dt>我是标题30</dt>
      </dl>
    </div>
    <script>
      let myScroll = new IScroll(".box", {
        mouseWheel: true, //让 iscroll 支持鼠标滚动
        // scrollbars: true
        scrollbars: "custom",
      });
      myScroll.on("beforeScrollStart", function () {
        console.log("滚动之前");
      });
      myScroll.on("scrollStart", function () {
        console.log("开始滚动");
      });
      /*myScroll.on("scroll", function () {
        console.log("正在滚动");
    });*/
      myScroll.on("scrollEnd", function () {
        console.log("滚动结束");
      });
    </script>
  </body>
</html>
